// 目标：使用React创建界面

// 1. 导入依赖包：react和react-dom
import React from 'react';
import ReactDOM from 'react-dom';

// 2. 创建React元素
// const title = React.createElement(
//   'div',
//   { id: 'box', className: 'demo' },
//   '这是一个React案例'
// );
// const li1 = React.createElement('li', null, '香蕉');
// const li2 = React.createElement('li', null, '橘子');
// const li3 = React.createElement('li', null, '苹果');
const title = React.createElement(
  'ul',
  { className: 'list' },
  React.createElement('li', null, '香蕉'),
  React.createElement('li', null, '橘子'),
  React.createElement('li', null, '苹果')
);

// JSX => babel => React.createElement => 最终还是虚拟DOM
const title2 = (
  <ul className="list">
    <li>香蕉</li>
    <li>橘子</li>
    <li>苹果</li>
  </ul>
);

console.log(title, title2);

// 3. 将React元素渲染到界面中
ReactDOM.render(title, document.getElementById('root'));
